import React from 'react';
import { Fragment } from 'react/jsx-runtime';
import { createHashRouter, Navigate } from 'react-router-dom';

import ErrorBoundary from '@/components/ErrorBoundary';
import Layout from '@/layout';
import lazyLoad from '@/router/LazyLoad';
import NotPermission from '@/views/403/index';
import NotFound from '@/views/404/index';
import Login from '@/views/login/index';
import Welcome from '@/views/welcome';

import AuthLoader from './AuthLoader';

// 路由映射表
export const routeMap: Record<string, JSX.Element> = {
    // 欢迎页由于是默认首页，直接使用 Welcome 组件
    '/welcome': <Welcome />,
    // 其他页面使用 lazyLoad 包裹，按需加载
    '/dashboard': lazyLoad(React.lazy(() => import('@/views/dashboard'))),
    '/system/userList': lazyLoad(React.lazy(() => import('@/views/system/user'))),
    '/system/menuList': lazyLoad(React.lazy(() => import('@/views/system/menu'))),
    '/system/roleList': lazyLoad(React.lazy(() => import('@/views/system/role'))),
    '/system/deptList': lazyLoad(React.lazy(() => import('@/views/system/dept'))),
    '/demo/commentList': lazyLoad(React.lazy(() => import('@/views/demo/comment'))),
    '/demo/videoList': lazyLoad(React.lazy(() => import('@/views/demo/video')))
};

/**
 * 路由配置
 * element使用React.Fragment占位，内容区由 Tabs/KeepAliveTabs 控制渲染
 */
export const routes = [
    {
        path: '/',
        element: <Navigate to="/welcome" />,
        meta: {
            title: '首页',
            auth: false
        }
    },
    {
        path: '/login',
        element: <Login />,
        meta: {
            title: '登录页',
            auth: false
        }
    },
    {
        id: 'layout',
        element: <Layout />,
        // Router6框架有自己的捕获边界，会优先捕获 loader/action 抛出的异常，并渲染其自己的 <ErrorBoundary> 或默认的错误 UI（如 DefaultErrorComponent）。
        // 设置 errorElement 捕获路由加载器（loader）或操作（action）中的错误，指定自定义的错误边界组件来渲染。
        errorElement: <ErrorBoundary />,
        // 类似拦截器:数据预取,优化用户体验,避免“空白状态 + loading”。
        loader: AuthLoader,
        // 当路由匹配时，是否需要重新执行加载器（loader）函数，即是否需要重新获取数据。
        // shouldRevalidate: () => false,
        children: [
            {
                path: '/welcome',
                element: <Fragment />,
                meta: {
                    title: '欢迎页',
                    auth: false
                }
            },
            {
                path: '/dashboard',
                element: <Fragment />,
                meta: {
                    title: '工作台',
                    icon: 'DesktopOutlined',
                    auth: false
                }
            },
            {
                path: '/system',
                element: <Fragment />,
                meta: {
                    title: '系统管理',
                    icon: 'SettingOutlined'
                },
                children: [
                    {
                        path: 'userList',
                        element: <Fragment />,
                        meta: {
                            title: '用户管理',
                            icon: 'UserOutlined'
                        }
                    },
                    {
                        path: 'menuList',
                        element: <Fragment />,
                        meta: {
                            title: '菜单管理',
                            icon: 'MenuOutlined'
                        }
                    },
                    {
                        path: 'roleList',
                        element: <Fragment />,
                        meta: {
                            title: '角色管理',
                            icon: 'TrademarkCircleOutlined'
                        }
                    },
                    {
                        path: 'deptList',
                        title: '部门管理',
                        element: <Fragment />,
                        meta: {
                            title: '部门管理',
                            icon: 'SendOutlined'
                        }
                    }
                ]
            },
            {
                path: '/demo',
                element: <Fragment />,
                meta: {
                    title: 'demo管理',
                    icon: 'CloudOutlined'
                },
                children: [
                    {
                        path: 'commentList',
                        element: <Fragment />,
                        meta: {
                            title: '评论管理',
                            icon: 'BarsOutlined'
                        }
                    },
                    {
                        path: 'videoList',
                        element: <Fragment />,
                        meta: {
                            title: '视频管理',
                            icon: 'DotChartOutlined'
                        }
                    }
                ]
            }
        ]
    },
    {
        path: '/403',
        element: <NotPermission />,
        meta: {
            title: '430页面',
            auth: false
        }
    },
    {
        path: '/404',
        element: <NotFound />,
        meta: {
            title: '404页面',
            auth: false
        }
    },
    {
        // 兜底路由，匹配所有未定义的路由
        path: '*',
        // 重定向到404页面，同时浏览器地址栏路由同步成 /404，优化体验
        element: <Navigate to="/404" />
    }
];

/**
 * 静态页面路径列表
 * 例如: /403, /404 等不需要权限校验的页面
 * 这些页面通常是错误页面或信息提示页面，不需要进行权限验证。
 */
export const staticPath = ['/403', '/404'];

/**
 * 推荐API路由: 可以使用 loader(类似拦截器) action
 * createHashRouter适合B端后台管理系统
 * createBrowserRouter适合C端应用，需后端处理资源和接口配置（如nginx）
 */
const router = createHashRouter(routes, {
    // 基础路由，部署在非根目录时使用，获取自vite.base配置项
    basename: import.meta.env.BASE_URL,
    future: {
        v7_relativeSplatPath: true
    }
});

export default router;
